<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/axios.min.js"></script>
</head>

<body>
    商店管理系统
    <div>
        商品名称<input type="text">
        商品价格<input type="text">
        商品详情<input type="text">
        商品图片<input type="text">
        <input type="button" value="发布" id="btn">
    </div>

    <div class="update" style="display:none;">
        商品名称<input type="text">
        商品价格<input type="text">
        商品详情<input type="text">
        商品图片<input type="text">
        <input type="button" value="保存" id="saveBtn">
    </div>

    <ul id="list">

    </ul>
    <script>
        /*
         接口地址：  http://jx.xuzhixiang.top/ap/api/goods/goods-add.php
         接口请求方式：get
         接口参数：
        1.pimg 2.pname 3.pprice 4.pdesc 5.uid （可选）用户商品
        使用方式  post 请求，参数在请求体
        */
        var id = localStorage.getItem("id");
        var input = document.getElementsByTagName("input");
        btn.onclick = function () {
            // 获取接口所需要的参数
            var pname = input[0].value;
            var pprice = input[1].value;
            var pdesc = input[2].value;
            var pimg = input[3].value;
            // 商品接口
            var addGoodsAPI = "http://jx.xuzhixiang.top/ap/api/goods/goods-add.php";
            axios.get(addGoodsAPI, {
                params: {
                    pname, pprice, pdesc, pimg, uid: id
                }
            }).then(res => {
                alert(res.data.msg)
                loadGoodsList();
            })
        }
        loadGoodsList();
        // 封装商品列表函数
        /*
         所有商品接口
            get
            参数
            pagesize  每页获取几个数据
            pagenum 获取第几页数据
            uid  用户id
            http://jx.xuzhixiang.top/ap/api/allproductlist.php?pagesize=20&pagenum=4
        */
        var goodsArr;
        function loadGoodsList() {
            var uid = id;
            var pagenum = 0;
            var pagesize = 48;
            var listAPI = "http://jx.xuzhixiang.top/ap/api/allproductlist.php";
            axios.get(listAPI, {
                params: {
                    uid,
                    pagenum,
                    pagesize,
                }
            }).then(res => {
                console.log(res.data);
                goodsArr = res.data.data;
                var goodsStr = "";
                goodsArr.forEach(item => {
                    goodsStr += `
                    <li>
                        <h2>${item.pname}</h2>
                        <p>${item.pprice}</p>
                        <p>${item.pdesc}</p>
                        <img src="${item.pimg}" alt="">
                        <button onclick="delBtn(${item.pid},this)">删除</button>
                        <button onclick="updateBtn(${item.pid},this)">修改</button>
                    </li>
                    `
                });
                list.innerHTML = goodsStr;
            })
        }
        // 删除事件
        /*
        接口地址： http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php
         接口请求方式：get
         接口参数：
                pid（必选）商品的id
                uid（必选）用户的id
                token（必选）登陆时候返回的token
        onclick="delBtn(${item.pid},this)" 中的this就是这个按钮
        */
        function delBtn(pid, btn) {
            // 读取本地存储的token
            var token = localStorage.getItem("token");
            var uid = id;
            var delAPI = "http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php";
            axios.get(delAPI, { params: { pid, uid, token } }).then(res => {
                // console.log(res.data);
                // 删除成功
                // location.reload();1- 刷新页面
                // loadGoodsList();2-重新加载商品列表
                // 删除一行的dom
                // console.log(btn);
                btn.parentNode.remove();
                alert(res.data.msg);
            })
        }
        /*
        修改事件
         接口地址：http://jx.xuzhixiang.top/ap/api/goods/goods-update.php
         接口请求方式：get
         接口参数：
                pid（必选）商品的id
                pname（必选）商品
                pprice（必选）商品
                pdesc（必选）商品
        */
        function updateBtn(pid) {
            var updateStyle = document.querySelector(".update");
            updateStyle.style.display = "block";
            var pObj = goodsArr.find(v => {
                return pid == v.pid;
            })
            // console.log(ppid.pid);
            // 文本框中显示要修改的数据
            var inputs = document.querySelectorAll(".update input");
            inputs[0].value = pObj.pname;
            inputs[1].value = pObj.pprice;
            inputs[2].value = pObj.pdesc;
            inputs[3].value = pObj.pimg;
            saveBtn.onclick = function () {
                var pname = inputs[0].value;
                var pprice = inputs[1].value;
                var pdesc = inputs[2].value;
                var pimg = inputs[3].value;
                var updateAPI = "http://jx.xuzhixiang.top/ap/api/goods/goods-update.php";
                axios.get(updateAPI, {
                    params: { pname, pprice, pdesc, pimg, pid }
                }).then(res => {
                    // console.log(res.data);
                    alert(res.data.msg);
                    loadGoodsList();
                })
            }
        }
    </script>

</body>

</html>